<style scoped lang="less">
	.vip-container{
		background-color: white;
		margin-bottom: 10vh;
	}
	.vip-banner {
		position: absolute;
		top: 0;
		left: 0;
		width: 90vw;
		height: 45vw;
		border-radius: 1vw;
	}
	
	.vip-banner-wrap {
		position: relative;
		margin-left: 5vw;
		border-radius: 1vw;
		margin-top: -23vw;
		width: 90vw;
		height: 45vw;
		box-shadow: @--gray 0 2vw 3vw 0;
		background-color: @--black;
	}
	.vip-user-info {
		position: absolute;
		z-index: 9999;
		bottom: 6vw;
		left: 5vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.vip-head-img{
		width: 12vw;
		height: 12vw;
		border-radius: 50%;
	}
	span.exp-time {
		margin-top: 0.2rem;
		color: white;
		font-size: 0.3rem;
	}
	.vip-count{
		position: absolute;
		z-index: 9999;
		bottom: 6vw;
		right: 5vw;
		color: white;
		font-size: 0.4rem;
	}
	
	.vip-top-wrap {
		width: 100vw;
		overflow: hidden;
	}
	
	.vip-top {
		margin: 0 -10vw;
		width: 120vw;
		background: @--theme;
		height: 35vw;
		overflow: hidden;
		border-radius: 0 0 20vw 20vw;
	}

	.vip-title {
		margin-top: 5vh;
		font-size: 0.6rem;
		text-align: center;
	}
	.vip-item-wrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 6vw 1vw;
		margin: 2vw 7vw;
		border-radius: 1vw;
		border: @--theme 1px solid;
	}
	.item-selected{
		background: rgba(221, 247, 6, 0.32);
	}
	.vip-item-name{
		font-size: 0.45rem;
	}
	.vip-item-desc{
		margin-top: 2vh;
		font-size: 0.45rem;
		color: #aeaeae;
	}
	.vip-item-price{
		color: @--price;
		font-size: 0.6rem;
	}
	.vip-item-original-price{
		color: @--gray;
		font-size: 0.4rem;
		text-decoration: line-through;
	}
	.symbol{
		margin-right: -1vw;
		font-size: 0.4rem;
	}
	.vip-btn {
		border-radius: 7vw;
		font-size: 0.5rem;
		color: white;
		margin: 7vw;
		padding: 4vw;
		background: @--primary;
	}
	span.vip-price-wrap {
		display: flex;
		flex-direction: column;
	}
	
</style>
<template>
	<div class="vip-container" v-if="vipData!=null">
		<div class="vip-top-wrap">
			<div class="vip-top" :style="{background:vipData.top_color}">
			
			</div>
		</div>
		<div class="vip-banner-wrap">
			<img v-if="vipData.banner!=null" class="vip-banner" :src="GLOBAL.getUrl(vipData.banner[0])">
			<div class="vip-user-info">
				<img class="vip-head-img" :src="vipData.userInfo.head_img">
				<span class="exp-time">{{vipData.userInfo.type===GLOBAL.USER_TYPE_VIP?'到期时间:'+vipData.expiration_time.substr(0,11):'您还不是会员'}}</span>
			</div>
			<div class="vip-count">{{vipData.count}} 人已加入</div>
		</div>
		<div class="vip-title">
			超级VIP
		</div>
		<div @click="selected(index)" class="vip-item-wrap" :class="selectedIndex===index?'item-selected':''" v-for="(item,index) in vipData.sku" :key="item.id">
			<span>
				<div class="vip-item-name">享受会员价消费</div>
				<div class="vip-item-desc">{{item.attach}}天</div>
			</span>
			<span class="vip-price-wrap">
				<span class="vip-item-original-price">
					<span class="symbol">￥</span>
					{{item.original_price/100}}
				</span>
				<span class="vip-item-price">
					<span class="symbol">￥</span>
					{{item.lowest_price/100}}
				</span>
				
			</span>
		</div>
		<div class="vip-btn" @click="buy">{{vipData.userInfo.type===GLOBAL.USER_TYPE_VIP?'去续费':'去开通'}}</div>
	
	</div>
</template>
<script>
  import {get} from '@/api/vip'
	import {Toast} from 'vant';
  export default {
    name: 'vip-index',
    data() {
      return {
        vipData: null,
	      selectedIndex:0
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        let vm = this;
        get().then(rep => {
          if (rep.data.data.banner != null) {
            rep.data.data.banner = JSON.parse(rep.data.data.banner);
          }
          rep.data.data.sku.sort(function(a,b){
            return a.attach - b.attach;
          });
          vm.vipData = rep.data.data;
        })
      },
      selected(index){
        this.selectedIndex = index;
      },
      buy(){
        let params = {id: this.vipData.goods_id, skuid: this.vipData.sku[this.selectedIndex].id};
        this.$router.push({name: 'submit', params: params});
      },
      toPay(order_id,data) {
        let vm = this;
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            vm.$router.push({name: 'vip-pay-result', params: {order_id: order_id}});
          },
          fail: function (res) {
            Toast('支付失败');
          }
        });
      }
    }

  }
</script>